<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>霓虹贪吃蛇</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
            height: 100vh;
            margin: 0;
            font-family: 'Arial', sans-serif;
            overflow: hidden;
        }

        #game-container {
            position: relative;
            margin-top: 2rem;
            box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
            border-radius: 15px;
            overflow: hidden;
        }

        #gameCanvas {
            background: rgba(0, 0, 0, 0.9);
            border: 2px solid #00ffff;
            border-radius: 15px;
        }

        #score-board {
            color: #00ffff;
            font-size: 2rem;
            margin: 1rem 0;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
        }

        #restart-btn {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 15px 30px;
            background: rgba(0, 255, 255, 0.1);
            border: 2px solid #00ffff;
            color: #00ffff;
            font-size: 1.2rem;
            cursor: pointer;
            border-radius: 25px;
            transition: all 0.3s;
        }

        #restart-btn:hover {
            background: rgba(0, 255, 255, 0.3);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
        }

        .grid-line {
            position: absolute;
            background: rgba(0, 255, 255, 0.05);
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="score-board">得分: 0</div>
    <div id="game-container">
        <canvas id="gameCanvas"></canvas>
        <button id="restart-btn">重新开始</button>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreBoard = document.getElementById('score-board');
        const restartBtn = document.getElementById('restart-btn');

        // 游戏配置
        const GRID_SIZE = 20;
        const GAME_SPEED = 100;
        let score = 0;
        
        // 设置画布大小
        canvas.width = 600;
        canvas.height = 400;

        // 蛇初始状态
        let snake = [
            { x: 10, y: 10 }
        ];
        let direction = 'right';
        let food = generateFood();
        let gameLoop;

        // 生成食物
        function generateFood() {
            return {
                x: Math.floor(Math.random() * (canvas.width/GRID_SIZE)),
                y: Math.floor(Math.random() * (canvas.height/GRID_SIZE))
            };
        }

        // 绘制渐变方块
        function drawBlock(x, y, color) {
            const gradient = ctx.createRadialGradient(
                x*GRID_SIZE + GRID_SIZE/2,
                y*GRID_SIZE + GRID_SIZE/2,
                0,
                x*GRID_SIZE + GRID_SIZE/2,
                y*GRID_SIZE + GRID_SIZE/2,
                GRID_SIZE/2
            );
            
            gradient.addColorStop(0, color);
            gradient.addColorStop(1, color.replace('1)', '0.3)'));
            
            ctx.fillStyle = gradient;
            ctx.fillRect(x*GRID_SIZE, y*GRID_SIZE, GRID_SIZE-1, GRID_SIZE-1);
        }

        // 游戏主循环
        function gameUpdate() {
            // 移动蛇头
            const head = {...snake[0]};
            switch(direction) {
                case 'up': head.y--; break;
                case 'down': head.y++; break;
                case 'left': head.x--; break;
                case 'right': head.x++; break;
            }

            // 碰撞检测
            if (head.x < 0 || head.x >= canvas.width/GRID_SIZE ||
                head.y < 0 || head.y >= canvas.height/GRID_SIZE ||
                snake.some(segment => segment.x === head.x && segment.y === head.y)) {
                gameOver();
                return;
            }

            // 吃食物
            if (head.x === food.x && head.y === food.y) {
                score += 10;
                scoreBoard.textContent = `得分: ${score}`;
                food = generateFood();
            } else {
                snake.pop();
            }

            snake.unshift(head);

            // 绘制画面
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制蛇
            snake.forEach((segment, index) => {
                const color = `hsla(${150 + index*5}, 100%, 50%, 1)`;
                drawBlock(segment.x, segment.y, color);
            });

            // 绘制食物
            drawBlock(food.x, food.y, 'rgba(255, 50, 100, 1)');
        }

        function gameOver() {
            clearInterval(gameLoop);
            restartBtn.style.display = 'block';
        }

        function startGame() {
            snake = [{ x: 10, y: 10 }];
            direction = 'right';
            score = 0;
            scoreBoard.textContent = '得分: 0';
            food = generateFood();
            restartBtn.style.display = 'none';
            clearInterval(gameLoop);
            gameLoop = setInterval(gameUpdate, GAME_SPEED);
        }

        // 事件监听
        document.addEventListener('keydown', (e) => {
            switch(e.key) {
                case 'ArrowUp':
                    if (direction !== 'down') direction = 'up';
                    break;
                case 'ArrowDown':
                    if (direction !== 'up') direction = 'down';
                    break;
                case 'ArrowLeft':
                    if (direction !== 'right') direction = 'left';
                    break;
                case 'ArrowRight':
                    if (direction !== 'left') direction = 'right';
                    break;
            }
        });

        restartBtn.addEventListener('click', startGame);

        // 初始化游戏
        startGame();

        // 创建网格线
        function createGrid() {
            const container = document.getElementById('game-container');
            for(let x = 0; x < canvas.width; x += GRID_SIZE) {
                const line = document.createElement('div');
                line.className = 'grid-line';
                line.style = `width:1px; height:100%; left:${x}px; top:0;`;
                container.appendChild(line);
            }
            for(let y = 0; y < canvas.height; y += GRID_SIZE) {
                const line = document.createElement('div');
                line.className = 'grid-line';
                line.style = `height:1px; width:100%; top:${y}px; left:0;`;
                container.appendChild(line);
            }
        }

        createGrid();
    </script>
</body>
</html>